<template>
    <div>
        <!-- 评论 -->
        <div class="commentPage">
            <span class="back iconfont icondirection-left" @click="back"></span>
            <div class="m_comment">
                <h4 class="cmt_titlt">精彩评论</h4>
                <div class="cmt_list" v-if="hotComments && hotComments.length>0">
                    <div class="cmt_item" v-for="(item,index) in hotComments" :key="index">
                        <div class="cmt_head">
                            <img :src="item.user.avatarUrl" alt="">
                        </div>
                        <div class="cmt_wrap">
                            <div class="cmt_header">
                                <div class="cmt_meta">
                                    <span class="cmt_user">{{item.user.nickname}}</span>
                                    <span class="cmt_time">{{item.time | formatDate}}</span>
                                </div>
                                <div class="cmt_like">
                                    <span class="cmt_count">{{item.likedCount}}</span>
                                    <i class="icon">
                                        <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                                    </i>
                                </div>
                            </div>
                            <div class="cmt_content">
                                <span class="cmt_text">{{item.content}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmt_list nocomment" v-else>暂时没有评论</div>
                <br>
                <Loading v-if="isLoading"></Loading>
            </div>
            <div class="m_comment">
                <h4 class="cmt_titlt">最新评论({{total}})</h4>
                <div class="cmt_list" v-if="commentList && commentList.length>0">
                    <div class="cmt_item" v-for="(item,index) in commentList" :key="index">
                        <div class="cmt_head">
                            <img :src="item.user.avatarUrl" alt="">
                        </div>
                        <div class="cmt_wrap">
                            <div class="cmt_header">
                                <div class="cmt_meta">
                                    <span class="cmt_user">{{item.user.nickname}}</span>
                                    <span class="cmt_time">{{item.time | formatDate}}</span>
                                </div>
                                <div class="cmt_like">
                                    <span class="cmt_count">{{item.likedCount}}</span>
                                    <i class="icon">
                                        <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                                    </i>
                                </div>
                            </div>
                            <div class="cmt_content">
                                <span class="cmt_text">{{item.content}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmt_list nocomment" v-else>暂时没有评论</div>
                <br>
                <Loading v-if="isLoading"></Loading>
                <br>
            </div>
        </div> 
    </div>
</template>

<script>
import Loading from '@/components/Loading'
export default {
    data(){
        return{
            commentId: null,
            hotComments: null,
            commentList: null,
            total:0,
            isLoading: true
        }
    },
    components:{
        Loading
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        let fmt = 'yyyy-MM-dd hh:mm';
        if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
            }
        }
        return fmt;
      }
    },
    created(){
        this.$root.isPlayer = false;
        this.commentId=this.$route.params.id;
        if(this.commentId == this.$root.musicStore.musicID){
            this.$http.get('/comment/music?id='+this.commentId).then(data=>{
                this.isLoading = false;
                this.commentList = data.data.comments;
                this.hotComments = data.data.hotComments;
                this.total = data.data.total;
            }).catch(err=>{
                console.log(err);
            });
        }else{
            this.$http.get('/comment/playlist?id='+this.commentId).then(data=>{
                this.isLoading = false;
                this.commentList = data.data.comments;
                this.hotComments = data.data.hotComments;
                this.total = data.data.total;
            }).catch(err=>{
                console.log(err);
            });
        }
    },
    methods:{
        // 返回上一级
        back(){
            this.$root.isPlayer = true;
            this.$router.go(-1);
        },
    },
}
</script>

<style lang="less" scoped>
.commentPage{
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    z-index: 20;
    top: 0;
    .back{
        display: block;
        height: 30px;
        font-size: 24px;
        margin-left: 4px;
        line-height: 30px;
        color: #dd001b;
    }
    h4{
        padding: 0 10px;
        height: 23px;
        line-height: 23px;
        margin: 0;
        color: #666;
        font-size: 12px;
        font-weight: 400;
        background: rgba(0,0,0,.05);
    }
    .nocomment{
        text-align: center;
        padding-top: 10px;
    }
    .cmt_list{
       .cmt_item{
           display: flex;
           flex-direction: row;
           padding-top: 10px;
           width: 100%;
           -webkit-box-orient: horizontal;
           -webkit-box-direction: normal;
           .cmt_head{
                height: 35px;
                margin: 0 10px;
                flex: none;
                img{
                    display: block;
                    border-radius: 50%;
                    width: 30px;
                    height: 30px;
                }
           }
           .cmt_wrap{
                padding-right: 10px;
                padding-bottom: 11px;
                -webkit-box-flex: 1;
                flex: auto;
                width: 0;
                position: relative;
                flex-direction: row;
                border-bottom: 1px solid  rgba(0,0,0,.1);;
               .cmt_header{
                   display: flex;
                   justify-content: space-between;
                   .cmt_meta{
                        display: flex;
                        flex-direction: column;
                        width: 70%;
                        .cmt_user{
                                display: block;
                                font-size: 14px;
                                color: #666;
                                line-height: 20px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                -webkit-box-flex: 1;
                                -webkit-flex: auto;
                                flex: auto;
                        }
                        .cmt_time{
                            display: block;
                            font-size: 9px;
                            color: #999;
                        }
                    }
                    .cmt_like{
                            width: 65px;
                            height: 22px;
                            line-height: 22px;
                            font-size: 11px;
                            color: #999;
                            -webkit-box-flex: 0;
                            flex: none;
                            text-align: right;
                            .cmt_count{
                                display: inline-block;
                                min-width: 30px;
                                padding-left: 5px;
                                line-height: 22px;
                                font-size: 11px;
                                color: #999;
                                text-align: right;
                                vertical-align: middle;
                            }
                            .icon{
                                display: inline-block;
                                width: 14px;
                                height: 14px;
                                margin-left: 6px;
                                line-height: 0;
                                vertical-align: middle;
                                cursor: pointer;
                                svg{
                                    display: inline-block;
                                    vertical-align: middle;
                                    background-position: 0 0;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                }
                            }
                    }
               }
               .cmt_content{
                   position: relative;
                    color: #333;
                    font-size: 15px;
                    line-height: 22px;
                    margin-top: 5px;
                    span{
                        vertical-align: middle;
                        color: #333;
                        font-size: 15px;
                        line-height: 22px;
                    }
               }
           }
       }
    }
}
</style>